<template>
  <el-row :gutter="20">
    <el-col :span="6" v-for="item in dataList" :key="item.id"><div class="grid-content ep-bg-purple" >
        <div class="left">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class='right'>
             <p>{{item.title}}</p>
             <p>{{item.num}}</p>
        </div>
      </div></el-col>
  </el-row>
<div class="tit">
  成交排行
</div>
<div class="city">
  <div class="cityName">地区：</div>
  <div class="cityData">
    <PickIndex/>
  </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <div class="cityTime">
   <ToTimeIndex/>
 </div>
</div>
<div class="bottom">
  <ListIndex />
</div>

</template>

<script>
import {ref} from 'vue';

import PickIndex from './components/PickIndex';
import ToTimeIndex from './components/ToTimeIndex.vue';
import ListIndex from './components/ListIndex.vue';
export default {
  components:{
   PickIndex,ToTimeIndex,ListIndex
  },
  setup() {
     const dataList = ref([
      {
        id:1,
        title:'浏览量',
        num:1627,
        imgUrl:require('../../../../assets/imgs/icon01.png')
      },
       {
        id:2,
        title:'注册人数',
        num:666,
        imgUrl:require('../../../../assets/imgs/icon02.png')

      },
       {
        id:3,
        title:'关注人数',
        num:3777,
        imgUrl:require('../../../../assets/imgs/icon03.png')

      },
       {
        id:4,
        title:'点赞人数',
        num:1627,
        imgUrl:require('../../../../assets/imgs/icon04.png')


      },
     ]);
      
      
      const value = ref('')
      const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
    
     
     return {dataList,value,options}
  },
}
</script>


<style lang="less" scoped>
.bottom{
  width: 100%;
  height:650px;
  position: relative;
}
.city{
  width: 100%;
  height: 50px;
  background: #ccc;
}
.el-select{
  width: 80px;
appearance:none;
}


.el-col {
  height: 160px;
}

.grid-content {
  margin: 0 5px;
  min-height: 36px;
  height: 100%;
}
.left{
  width: 50%;
  height: 100%;
    background: white;
  float: left;
  border-radius: 10px 0 0 10px;
  img{
    float: right;
    margin-top: 20px;
    margin-right:10px ;
  }
}
.right{
  width: 50%;
  height: 100%;
  background: white;
  float: left;
  border-radius:0 10px 10px 0;

  p:nth-child(1){
    padding-top: 30px;
    font-size: 20px;
    color: #ccc;
  }
  p:nth-child(2){
    font-size: 40px;
  }
}
.tit{
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: white;
  margin-top: 20px;
  font-size: 20px;
  text-indent: 10px;
  font-weight: 800;
}
.cityTime{
    display: inline-block;
  margin-top: 5px;

}
.cityData{
  display: inline-block;
  margin-top: 5px;
}
.cityName{
  display: inline-block;
  margin-top: 5px;
  font-size: 20px;
  text-indent: 20px;
}
</style>